<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Jessica aliyun rtc demo</title>
    <script src="https://g.alicdn.com/apsara-media-box/imp-web-rts-sdk/2.5.1/aliyun-rts-sdk.js"></script>
    <script src="./js/jessibuca-pro-demo.js"></script>
    <link rel="stylesheet" href="./demo.css">
    <style>
        .container-shell:before {
            content: "jessibuca pro aliyun rtc demo";
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="input">
            <div>输入URL：</div>
            <input
                    autocomplete="on"
                    id="playUrl"
                    placeholder="请输入播放地址:artc://"
                    value=""
            />
            <button id="play">播放</button>
            <button id="pause" style="display: none">停止</button>
        </div>
        <div class="input" style="line-height: 30px">
            <button id="destroy">销毁</button>
        </div>
    </div>
</div>
<script src="./demo.js"></script>
<script>
    var $player = document.getElementById('play');
    var $pause = document.getElementById('pause');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');
    var $fps = document.getElementById('fps');

    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibuca = null;

    function create() {
        jessibuca = new JessibucaPro({
            container: $container,
            videoBuffer: 0.2, // 缓存时长
            decoder: './js/decoder-pro.js',
            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: true,
            debugLevel: 'debug',
            showBandwidth: showOperateBtns, // 显示网速
            showPerformance: showOperateBtns, // 显示性能
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: showOperateBtns,
                play: showOperateBtns,
                audio: showOperateBtns,
                ptz: showOperateBtns,
                quality: showOperateBtns,
                performance: showOperateBtns,
                scale: showOperateBtns,
            },
            qualityConfig: ['普清', '高清', '超清', '4K', '8K'],
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
            heartTimeout: 10,
            // checkFirstIFrame:false,
            // isFlv: true
        },);


        jessibuca.on(JessibucaPro.EVENTS.playFailedAndPaused, (error, lastFrame) => {
            console.log('error', error);
            if (error === JessibucaPro.ERROR.aliyunRtcError) {
                // 降级到其他播放协议上去，例如flv、hls 等。
            }
        })

        jessibuca.on(JessibucaPro.EVENTS.crashLog,(log)=>{
            console.error('crashLog',log)
        })

        jessibuca.on(JessibucaPro.EVENTS.playFailedAndPaused, (error) => {
            jessibuca.showErrorMessageTips('播放异常：' + error);
        })


        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $destroy.style.display = 'none';
    }

    function replay() {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
                play();
            });
        } else {
            create();
            play();
        }

    }

    function play() {
        var href = $playHref.value;
        if (href) {
            jessibuca.play(href).then(() => {
                $player.style.display = 'none';
                $pause.style.display = 'inline-block';
                $destroy.style.display = 'inline-block';
                notifySuccess('播放成功');
            }).catch((error) => {
                jessibuca.showErrorMessageTips(error.toString());
            });
        }
    }

    create();

    $player.addEventListener('click', function () {
        play();
    }, false)


    $pause.addEventListener('click', function () {
        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        jessibuca.pause();
    })

    $destroy.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
            });
        } else {
            create();
        }
    })
</script>

</body>
</html>
